/**
 * useEffect effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，
 * 如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
 * useEffect 接收一个函数，该函数会在组件渲染到屏幕之后才执行，
 * 该函数有要求：要么返回一个能清除副作用的函数，要么就不返回任何内容
 * 副作用函数还可以通过返回一个函数来指定如何清除副作用，为防止内存泄漏，清除函数会在组件卸载前执行。
 * 如果组件多次渲染，则在执行下一个 effect 之前，上一个 effect 就已被清除。
 *
 * 依赖项数组控制着 useEffect 的执行 如果是空数组，只在页面初始化后执行一次
 *
 * React 将按照 effect 声明的顺序依次调用组件中的 每一个 effect。
 *
 * 在 useEffect 中调用用函数时，要把该函数在 useEffect 中申明，不能放到外部申明，然后再在 useEffect 中调用
 */
import React, { useEffect, useState } from 'react';
import { Button } from 'antd-mobile';

function EffectCom() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(1);
  useEffect(() => {
    console.log('count ==', count);
    return () => {
      console.log('effect end', count);
    };
  }, [count]);
  useEffect(() => {
    console.log('num ==', num);
    return () => {
      console.log('effect end', num);
    };
  }, [num]);
  return (
    <div>
      <Button onClick={() => setCount(count + 1)}>{count}</Button>
      <Button onClick={() => setNum(num + 1)}>{num}</Button>
    </div>
  );
}
export default EffectCom;
